<template>
    <div class="electric-fence">
        <div class="module-title1">
            <div class="module-title_text">电子围栏</div>
        </div>
        <div class="electric-fence_module module-container">
            <div class="chart" id="electric-fence_chart"></div>
        </div>
    </div>
</template>

<script>
const color = ['#FDA50F', '#238DFF', '#33CAC5']
import { setSize } from '@/utils/common'
import { getElectronicQueryStatics } from '@/api/index.js'
export default {
    data() {
        return {
            myChart: null
        }
    },
    methods: {
        init () {
            this.myChart = this.$echarts.init(document.getElementById('electric-fence_chart'))
            const option = {
                color: color,
                title: {
                    text: '单位(次)',
                    textStyle: {
                        color: '#ffffff',
                        fontSize: setSize(12)
                    },
                    top: setSize(12),
                    left: setSize(30)
                },
                backgroundColor: 'rgba(0, 21, 37, 0.7)',
                grid: {
                    top: '15%',
                    left: '3%',
                    right: '3%',
                    bottom: '5%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis',
                    className: 'custom-tooltip',
                    formatter: params => {
                        let tooltips = ''
                        params.map((item) => {
                            tooltips = tooltips + 
                            `<div class='tooltip-container' style='display: flex; justify-content: space-between; align-items: center;'>
                                <span class='tooltip-sign' style='background-color:${color[item.seriesIndex]};'></span>
                                <div class='tooltip-name'>
                                    ${item.seriesName}
                                </div>
                                <div class='tooltip-value'>
                                    ${item.value}
                                </div>
                            </div>`
                        })
                        return tooltips
                    },
                },
                legend: {
                    data: ['防区1', '防区2', '防区3'],
                    top: setSize(16),
                    right: setSize(14),
                    textStyle: {
                        color: '#A1D5FF',
                        fontSize: setSize(13)
                    },
                    itemWidth: setSize(20), // 设置宽度
                    itemHeight: setSize(10), // 设置高度
                    itemGap: setSize(11) // 设置间距
                },
                xAxis: [
                    {
                        data: [],
                        axisLabel: {
                            margin: setSize(10),
                            color: 'rgba(255, 255, 255, 0.6)',
                            textStyle: {
                                fontSize: setSize(12)
                            },
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#737F88',
                            }
                        },
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        axisLabel: {
                            color: 'rgba(255, 255, 255, 0.6)',
                            textStyle: {
                                fontSize: setSize(12)
                            },
                        },
                        axisLine: {
                            show: false,
                        },
                        splitLine: {
                            lineStyle: {
                                width: setSize(1),
                                type: 'dotted',
                                color: 'rgba(70, 76, 131, 0.4)',
                            }
                        }
                    }
                ],
                series: [
                    {
                        name: '防区1',
                        type: 'line',
                        data: [],
                        lineStyle: {
                            width: setSize(2)
                        }
                    }, 
                    {
                        name: '防区2',
                        type: 'line',
                        data: [],
                        lineStyle: {
                            width: setSize(2)
                        }
                    },
                    {
                        name: '防区3',
                        type: 'line',
                        data: [],
                        lineStyle: {
                            width: setSize(2)
                        }
                    }
                ]
            }
            getElectronicQueryStatics({}).then((res) => {
                if (res.data) {
                    const { data } = res.data
                    if (data) {
                        option.xAxis[0].data = data[0]?.fenceCountList.map((item) => item.triggerMonth)
                        option.series[0].data = data[0]?.fenceCountList ? data[0]?.fenceCountList.map((item) => item.fenceCount) : []
                        option.series[1].data = data[1]?.fenceCountList ? data[1]?.fenceCountList.map((item) => item.fenceCount) : []
                        option.series[2].data = data[2]?.fenceCountList ? data[2]?.fenceCountList.map((item) => item.fenceCount) : []
                        console.log(option)
                        this.myChart.setOption(option)
                    }
                }
            })
        },
        disposeChart() {
            if (this.myChart) {
                this.myChart.dispose();
            }
        },
        initChart() {
            this.disposeChart();
            this.init();
        },
        setFontOption() {
            this.myChart.setOption({
                title: {
                    textStyle: {
                        fontSize: setSize(12)
                    },
                    top: setSize(12),
                    left: setSize(30)
                },
                legend: {
                    top: setSize(16),
                    right: setSize(14),
                    textStyle: {
                        fontSize: setSize(13)
                    },
                    itemWidth: setSize(20),
                    itemHeight: setSize(10),
                    itemGap: setSize(11)
                },
                xAxis: [
                    {
                        axisLabel: {
                            margin: setSize(10),
                            textStyle: {
                                fontSize: setSize(12)
                            },
                        },
                    }
                ],
                yAxis: [
                    {
                        axisLabel: {
                            textStyle: {
                                fontSize: setSize(12)
                            },
                        },
                        splitLine: {
                            lineStyle: {
                                width: setSize(1),
                            }
                        }
                    }
                ],
                series: [
                    {
                        lineStyle: {
                            width: setSize(2)
                        }
                    }, 
                    {
                        lineStyle: {
                            width: setSize(2)
                        }
                    },
                    {
                        lineStyle: {
                            width: setSize(2)
                        }
                    }
                ]
            })
        },
        refreshChart() {
            if (!this.myChart) {
                return
            }
            this.myChart.resize();
            this.setFontOption();
        }
    },
    beforeDestroy() {
        this.disposeChart();
    },
    mounted () {
        this.initChart()
        window.addEventListener('resize', () => {
            this.refreshChart()
        })
    },
}
</script>

<style lang="less" scoped>
.electric-fence {
    margin-top: 21px;
    .electric-fence_module {
        width: 427px;
        height: 222px;
        margin-top: 5px;
        .chart {
            width: 100%;
            height: 100%;
        }
    }
}

</style>